<template>
    <!-- <h1>TabsBottom</h1> -->
    <div class="tabs-bottom">
        <div class="tabs-bottom-wrap">
            <slot />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, toRef, watch, provide } from 'vue';
import { tabsBottomInjectionKey } from './injectionKeys';
import type { TabsBottomInjection } from './types';

defineOptions({
    name: 'TabsBottom',
});

const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: '',
    },
    activeColor: {
        type: String,
        default: '#1677ff',
    },
});

const emit = defineEmits(['update:modelValue', 'change']);

const activeValue = ref(props.modelValue);

watch(
    () => props.modelValue,
    (v) => {
        activeValue.value = v;
    }
);

/**
 * 设置激活值，供 TabItem 实例调用
 * @param {*} value
 */
const setActiveValue = (value: typeof props.modelValue): void => {
    activeValue.value = value;
    emit('update:modelValue', value);
    emit('change', value);
};

const injection: TabsBottomInjection = {
    activeValue,
    /*
        toRef(reactiveObject, propsName) ：
            toRef 函数，会将响应式对象（即参数1）的某个属性（即参数2）转换为 ref 对象，同时保持与源属性的响应式连接。
        反例：
            // ❌ 错误写法：解构出来的属性，会失去响应性
            const { activeColor } = props;
    */
    // 保持对 props.activeColor 的响应式引用
    activeColor: toRef(props, 'activeColor'),
    setActiveValue,
    // componentName: 'TabsBottom',
};

provide(tabsBottomInjectionKey, injection);

</script>

<style scoped>
.tabs-bottom-wrap {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	min-height: 50px;
	background: #fff;
}

::v-slotted(.tabs-bottom .tab-item) {
	flex: 1 1;
	font-size: 12px;
}

::v-slotted(.tabs-bottom .tab-item__badge) {
	top: 2px;
	right: 0;
}
</style>